<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toIndex"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.vtitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask"></image>
			</view>
		</view>
		<view class="total">
			<view class="test1">
				{{$data.$language.test1}}
			</view>
			<view class="test2">
				{{count_usdt}}
				<text class="test3">
					USDT
				</text>
			</view>

			<view class="test4">
			</view>
			<!-- <view class="test5">
				{{$data.$language.test5}}
				<text class="test6">
					{{wone}}
					<text class="test7">
						WONE
					</text>
				</text>
			</view> -->
		</view>
		<view class="recharge">
			<view class="toptitle">
				<view class="title">
					{{$data.$language.retitle}}
				</view>
				<view class="title2">
					{{$data.$language.retitle2}}：{{TotalData.usdt}} USDT
				</view>
			</view>
			<view class="bigbox">
				<view class="top">
					<view class="ullist">
						<view class="ltit">
							<image src="../../static/caifubeifen_slices/USDT.png" mode="" class="usdt"></image>
							<view class="leftTest">
								USDT
							</view>
						</view>
						<view class="rightTest">
							<!-- {{usdt}} -->
							<input type="number"  v-model="usdt" @input="inptBtn">
						</view>
					</view>
				</view>
				<image src="../../static/caifubeifen_slices/duihuan(1).png" mode="" class="change"></image>
				<view class="bottom">
					<view class="wolist">
						<view class="ltit">
							<image src="/static/caifubeifen_slices/wooImg.png" mode="" class="blue"></image>
							<view class="woo">
								WOO
							</view>
						</view>
						<view class="woo_250">
							<!-- {{wooCounts}} -->
							50%
						</view>
					</view>
					<view class="wolist">
						<view class="ltit">
							<image src="../../static/caifubeifen_slices/woneImg.png" mode="" class="yellow"></image>
							<view class="wone">
								WONE
							</view>
						</view>
						<view class="wone_250">
							<!-- {{woneCounts}} -->
							50%
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="monbtncer" v-if="bntshuminbtn">
			
		</view>
		<view class="monboxndmrj" v-if="bntshuminbtn">
			<view class="viewtitle">
				{{$data.$language.Passwordinput}}
			</view>
			<input type="password" :placeholder="$data.$language.Passwordinput" v-model="password" :maxlength='6'>
			<view class="btnmaninds">
				<view class="aatione" @click="cancellationbtn()">
					{{$data.$language.cancellation}}
				</view>
				<view class="" @click="quBtns">
					{{$data.$language.qbtn}}
				</view>
			</view>
		</view>
		<view class="notice" v-if="langImg">
			{{notice}}
		</view>
		<view class="notice" v-else>
			{{notice_en}}
		</view>
		<view class="btn" @click="btnE" :class="inpustShow==true?'atcvlone':''">
			{{$data.$language.btnE}}
		</view>
	</view>
</template>

<script>
	// import { getWealth } from "../../api"
	import Web3 from 'web3';
	const web3 = new Web3(window.ethereum);
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import { getWealth,getExchange,getBalance } from '@/api/index.js';
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
import noticeBar from "../../uni_modules/uview-ui/libs/config/props/noticeBar";
	// var langImg = uni.getStorageSync('locale')=='zh-CN'
	// console.log(langImg,'langImg')
	export default {
		data() {
			return {
				// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				langImg:uni.getStorageSync('locale')=='tr-CN',
				isDrawerOpen: false,
				isOpenMask: false,
				wone:'',
				count_usdt:'',
				usdt:'',
				wone_usdt:'',
				notice:'',
				notice_en:'',
				woo_usdt:'',
				wooCount:'',
				woneCount:'',
				inpustShow:false,
				TotalData:{},
				bntshuminbtn:false,
				password:'',
			}
		},
		computed: {
			wooCounts: function() {
				return (parseInt(this.usdt/this.woo_usdt*2.5*100)/100).toFixed(2)
			},
			woneCounts: function() {
				return (parseInt(this.usdt/this.wone_usdt*2.5*100)/100).toFixed(2)
			},
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.loadData()
		},
		methods: {
			cancellationbtn(){
				this.bntshuminbtn = false
			},
			quBtns(){
				this.bntshuminbtn = false
				getExchange({
					usdt:this.usdt,
					password:this.password,
				},
				    (data) => {
						console.log(data)
						var PaymentScc = this.$data.$language.PaymentScc
						uni.showToast({
							title:PaymentScc,
							icon:"none",
							duration:2000
						})
						this.loadData()
				   //    // 处理成功返回的数据
					  // this.count_usdt = data.count_usdt
					  // this.wone_usdt = data.wone_usdt
					  // this.usdt = data.usdt
					  // this.wone = data.wone
				    },
				    (errorMsg) => {
				      // 处理请求失败或错误的情况
				      console.error(errorMsg);
					  var mimacuowu = this.$data.$language.mimacuowu
					  uni.showToast({
					  	title:mimacuowu,
					  	icon:"none",
					  	duration:2000
					  })
				    }
				);
			},
			btnE(){
				if(this.inpustShow){
					
					return
				} else if(this.TotalData.usdt<=0){
					var monhdbhdks = this.$data.$language.monhdbhdks
					uni.showToast({
						title:monhdbhdks,
						icon:"none",
						duration:2000
					})
				}else{
					this.bntshuminbtn = true
				}
				
			},
			inptBtn(v){
				if(parseFloat(this.usdt) < 100 || this.usdt == ''){
					var that = this
					that.inpustShow = true
					// that.usdt = 100
					// setTimeout(function(){
					// 	that.inpustShow = true
					// },100)
				}else{
					var that = this
					that.inpustShow = false
				}
			},
			refreshLanguage(locale) {
			      if (locale === 'zh-CN') {
			        this.$language = zhCN
			      } else if (locale === 'en-US') {
			        this.$language = enUS
			      }else{
					  this.$language = trCN
				  }
				  // uni.reLaunch({
				  //   url: '/pages/wealth/wealth' // 当前页面的lujing
				  // });				  
			},
			toIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			loadData() {
			    getWealth(
			        (data) => {
			          // 处理成功返回的数据
					  // this.count_usdt = parseInt(data.count_usdt).toFixed(2)
					  this.TotalData = data
					  this.count_usdt = data.count_usdt
					  this.wone_usdt = data.wone_usdt
					  this.usdt = data.usdt
					  this.wone = data.wone
					  this.notice = data.notice
					  this.notice_en = data.notice_en
					  this.woo_usdt = data.woo_usdt
					  // this.wooCount = parseInt(data.usdt/data.woo_usdt*2.5).toFixed(2)
					  // this.woneCount = parseInt(data.usdt/data.wone_usdt*2.5).toFixed(2)
					  // console.log(woneCount,'dfghjkl');
			        },
			        (errorMsg) => {
			          // 处理请求失败或错误的情况
			          console.error(errorMsg);
			        }
			    );
				
			},
			
			

		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style lang="less">
	.box {
		padding: 0 24rpx;
		background: linear-gradient(25deg,#fff,#fff,#fff,#fff, #ADBEDE, #8BA3CD);
		position: relative;
	}
	.monbtncer{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0, .4);
		z-index: 999;
	}
	.monboxndmrj{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9999;
		width: 600rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 14rpx;
		.viewtitle{
			width: 100%;
			font-size: 34rpx;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			color: #000000;
		}
		input{
			width: 80%;
			height: 80rpx;
			border: 1rpx solid #e9e9e9;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			display: block;
			margin: auto;
		}
		.btnmaninds{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;
			view{
				width: 200rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				background: #0762FF;
				border-radius: 6px;
				color: #fff;
			}
			.aatione{
				background-color: #e9e9e9;
				color: #000000;
			}
		}
	}

	.content {
		background: #F8F8F8;
	}

	.bgImage {
		width: 100%;
		height: 100%;
	}

	.head-title .img {
		width: 138rpx;
		height: 54rpx;
		box-shadow: unset;
		margin-top: unset;
		border-radius: unset;
	}
	.notice{
		font-size: 24rpx;
		margin-top: 10rpx;
		text-align: left;
		color: #ababab;
	}

	.iconflex {
		flex: 1;
		color: #2C2C2C;
	}

	.language {
		width: 36rpx;
		height: 36rpx;
		object-fit: contain;
		box-shadow: unset;
		margin-top: unset;
		border-radius: unset;

	}

	.list {
		width: 30rpx;
		height: 28rpx;
		object-fit: contain;
		box-shadow: unset;
		margin-top: unset;
		border-radius: unset;
	}

	.back {
		width: 16rpx;
		height: 28rpx;
		margin-left: 48rpx;
	}

	.nav-title {
		color: var(--c-232728-fontcolor4);
	}

	.center-head {
		flex: 1;
		text-align: center;
		color: var(--c-ffffff-fontcolor1);
		font-size: 32rpx;
	}

	.right-head {
		text-align: right;
	}

	.iconfont {
		font-size: 40rpx;
		margin-left: 44rpx;
	}

	.total {
		width: 100%;
		background: linear-gradient(90deg, #034ED4 0%, #4286F4 100%);
		padding: 42rpx 0 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 16rpx;
	}

	.test1 {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		margin-bottom: 8rpx;
	}

	.test2 {
		font-size: 48rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 21rpx;
	}

	.test3 {
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		margin-left: 18rpx;
		font-weight: 400;
	}

	.test4 {
		width: 378rpx;
		height: 2rpx;
		border-top: 2rpx solid #CEDDF7;
		margin-bottom: 15rpx;
	}

	.test5 {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
	}

	.test6 {
		font-size: 28rpx;
		font-family: ArialMT;
		color: #CEDDF7;
		margin-left: 24rpx;
	}

	.test7 {
		font-size: 20rpx;
		font-family: ArialMT;
		color: #CEDDF7;
		margin-left: 10rpx;
	}

	.recharge {
		margin-top: 46rpx;
	}

	.toptitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.recharge .title {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
	}

	.recharge .title2 {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AA7;
	}

	.bigbox {
		position: relative;
		margin-top: 12rpx;
	}

	.recharge .top {
		background: #F4F6FA;
		border-radius: 8px 8px 0px 0px;
		min-height: 160rpx;
		border-bottom: 2rpx solid #fff;
		padding: 40rpx 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.recharge .bottom {
		background: #F4F6FA;
		border-radius: 0px 0px 8px 8px;
		min-height: 160rpx;
		border-top: 2rpx solid #fff;
		padding: 40rpx 32rpx;
	}

	.usdt {
		width: 60rpx;
		height: 60rpx;
		border-radius: 16rpx;
	}

	.leftTest {
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: bold;
		color: #2C2C2C;
		margin-left: 14rpx;
	}

	.rightTest {
		font-size: 40rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: bold;
		color: #2C2C2C;
	}
	.rightTest input{
		width: 400rpx;
		font-size: 40rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: bold;
		color: #2C2C2C;
		text-align: right;
		border: 1rpx solid #e9e9e9;
		border-radius: 14rpx;
		padding-right: 24rpx;
	}

	.blue {
		height: 62rpx;
		width: 60rpx;
		border-radius: 16rpx;
	}

	.yellow {
		height: 62rpx;
		width: 60rpx;
		border-radius: 16rpx;
	}

	.woo {
		font-size: 32srpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: bold;
		color: #2C2C2C;
		margin-left: 14rpx;
	}

	.wone {
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: bold;
		color: #2C2C2C;
		margin-left: 14rpx;
	}

	.woo_250 {
		font-size: 40rpx;
		font-family: ArialMT;
		color: #2C2C2C;
	}

	.wone_250 {
		font-size: 40rpx;
		font-family: ArialMT;
		color: #2C2C2C;
	}

	.change {
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.note {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #939393;
		margin-top: 20rpx;
	}

	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #0762FF;
		border-radius: 12rpx;
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.atcvlone{
		background: #dbdbdb;
	}

	.ullist {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.ullist:last-child {
		margin-bottom: 0;
	}

	.wolist {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.wolist:last-child {
		margin-bottom: 0;
	}

	.ltit {
		display: flex;
		align-items: center;
	}

	.vtitle {
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
		position: absolute;
		top: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>